<template>
	<view class="comp-content " >
		<view class="all-mask" v-if="state.showFilter" @click.stop="onClose('mask')" @touchmove.stop.prevent="clear" />
		<scroll-view class="scroll ss-p-x-20" scroll-x="true">
			<template v-for="item in data" :key="item.id">
				<view class="scroll-item" :class="{'active':active(item.key)}" @click="storeClick(item)">
					<view class="ss-flex">
						{{item.label}}
						<view class="ss-m-l-10" v-if="item?.children&&item?.children.length">
							<uni-icons :type="state.actKey == item.key ? 'up':'down'" size="14" 
								:color="active(item.key)?'#F46800':'#747474'" />
						</view>
					</view>
				</view>
			</template>
		</scroll-view> 
		<view class="filter-list-box" v-show="state.showFilter">
			<view class="mask" @touchmove.stop.prevent="()=>{}" :class="[{
					'mask__visible':state.showItem
				}]" @click.stop="onClose('mask')">
			</view>
			<view class="filter-list" :class="[{ 'list-show':state.showItem }]">
				<view style="min-height: 50px; " class="ss-flex-wrap ss-flex">
					<view class="filter-item" v-for="child) in state.actChild" :key="child.value"
						:class="[{ 'filter-item-active': state.actData[state.actKey] === child.value}]"
						@click.stop="onTapItem(child)">
							{{ child.label }}
						<uni-icons v-if="state.actData[state.actKey] === child.value" 
							type="checkmarkempty" size="14" color="#F46800" />
					</view>
				</view>
			</view>
		</view>
		<view :id="listId" :style="{'min-height': `${(state.showFilter|| state.showItem) ? state.space:200}px`}">
			<slot />
		</view>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import { guid } from "@/sheep/helper/index"
	import { cloneDeep} from "lodash"
	import { ref, watch, reactive, computed, getCurrentInstance } from 'vue'
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
	const {windowHeight,safeArea} = uni.getWindowInfo()
	const emit = defineEmits(['change'])
	const listId = ref(guid())
	const query = uni.createSelectorQuery().in(getCurrentInstance().proxy)
	const props = defineProps({
		data: {
			type: Array,
			default: () => ([])
		},
		customTabbar:{
			type: Boolean,
			default: false
		}
	})
	const timer = null
	const state = reactive({
		space: 200,
		itemHeight: 0,
		showFilter: false,
		showItem: false,
		actKey:'',
		actChild: [],
		actData: {},
	})
	onLoad((opt) => { 
	})
	function getMinHeight(){
		return new Promise((resolve,reject)=>{
			try {
				query.select(`#${listId.value}`).boundingClientRect((res)=>{
					let minHeight =  windowHeight  - res.top
					if(minHeight <= res.height){
						resolve(200) 
					}else{
						resolve(minHeight)
					}
				}).exec()
			} catch (error) {
				console.log(error)
			}
		})
	}
	function active(key) {
		return key in state.actData
	}

	function storeClick(item ) {
		state.actChild = item?.children || []
		if (state.actChild.length) {
			if(state.actKey== item.key){
				onClose()
			}else{
				state.actKey = item.key
				onOpen()
			}
		} else {
			if(state.showFilter || state.showItem){
				onClose()
			}
			if (item.key in state.actData) {
				state.actData = {}
			}else{
				state.actData = {
					[item.key]:item.value
				}
			}
			dataChange()
		}
	}
	function dataChange(){
		emit('change',cloneDeep(state.actData))
	}
	async function onOpen() {
		let height = await getMinHeight()
		if(height > state.space){
			state.space = height
		}
		changeStatus('showFilter', 'showItem', true)
	}

	function showPopup(show) {
		// #ifdef H5
		document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible';
		// #endif
	}

	onHide(() => {
		showPopup(false)
	})
	onShow(() => {
		showPopup(state.showFilter)
	})

	function onTapItem(child) {
		if(state.actKey in state.actData){
			 state.actData = {}
		}else{
			state.actData = {[state.actKey]:child.value}
		}
		dataChange()
		onClose()
	}

	function onClose() {
		state.actKey = ''
		changeStatus('showItem', 'showFilter', false)
	}
	let watchTimer = null

	function changeStatus(param1, param2, status) {
		showPopup(status)
		state[param1] = status
		watchTimer && clearTimeout(watchTimer)
		watchTimer = setTimeout(() => {
			state[param2] = status
		}, status ? 20 : 200)
	}

	function clear(e) {
		// #ifndef APP-NVUE
		e.stopPropagation();
		e.preventDefault()
		// #endif
	}
</script>

<style lang="scss" scoped>
	.comp-content {
		position: relative;

		.all-mask {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			height: 100vh;
			z-index: 9;
		}

		.scroll {
			box-sizing: border-box;
			white-space: nowrap;
			width: 100%;
			height: 96rpx;
			position: relative;
			z-index: 10;

			.scroll-item {
				display: inline-block;
				box-sizing: border-box;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 50rpx;
				background: white;
				padding: 0 16rpx;
				font-family: PingFang SC;
				font-size: 24rpx;
				font-weight: normal;
				text-align: center;
				box-shadow: 0 0 10rpx 2rpx rgba(0, 0, 0, 0.08);
				margin: 16rpx 10rpx;
				color: #747474
			}
			.active{
				color: #F46800 !important;
				box-shadow: 0 0 10rpx 2rpx rgba(244,104,10,0.28);
			}
		}

		.filter-list-box {
			position: absolute;
			top: 90rpx;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 10;
			overflow: hidden;

			.aaa {
				width: 100%;
				overflow: hidden;
				display: flex;
				flex-wrap: wrap;
			}

			.mask {
				z-index: 15;
				position: absolute;
				animation-duration: 0.2s;
				top: 0;
				left: 0;
				z-index: 1;
				width: 100%;
				height: 100%;
				opacity: 0;
				background-color: rgba(0, 0, 0, 0.7);
				transition: opacity 0.3s;
			}

			.mask__visible {
				opacity: 1;
			}

			.filter-list {
				max-height: 200px;
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				// bottom: 0;
				z-index: 10;
				overflow: hidden;
				overflow-y: auto;
				background-color: #fff;
				transition-duration: 0.2s;
				-webkit-transition: -webkit-transform 0.2s;
				transition: -webkit-transform 0.2s;
				transition: transform 0.2s;
				transition: transform 0.2s, -webkit-transform 0.2s;
				-webkit-overflow-scrolling: touch;
				transform: translateY(-100%);
				padding-bottom: 10rpx;
			}

			.list-show {
				transform: translateY(0px);
			}

			.filter-item {
				width: 100%;
				height: 80rpx;
				font-size: 26rpx;
				color: #999;
				line-height: 80rpx;
				padding: 0 40rpx;
				display: flex;
				justify-content: space-between;
				// border: solid 1rpx #999;
			}

			.filter-item-active {
				color: #F46800 !important;
				background: #FFF8F3 !important;
				// border: solid 1rpx #F46800 !important;
			}
		}

		.open {
			overflow: visible;
		}
	}
</style>